<template lang="html">
  <div class="uedit">
			<vue-editor @ready="editorReady" :style="{ height: this.height + 'px', width: this.width + '%'}"></vue-editor>
	</div>
</template>

<script>
import VueEditor from 'vue-ueditor'

export default {
  props: {
    form: {
      type: Object
    },
    keyname: {
      type: String
    },
    height: { // 默认300高
      type: Number,
      default: 300
    },
    width: {
      type: Number
    }
  },
  components: {
    VueEditor
  },
  mounted () {
    // console.log(this.form)
  },
  methods: {
    editorReady (editorInstance) {
      this.$editor = editorInstance
      editorInstance.setContent(this.form[this.keyname])
      editorInstance.addListener('contentChange', () => {
        this.form[this.keyname] = editorInstance.getContent()
      })
    },
    clearContentText () {
      setTimeout(() => {
        this.$editor.execCommand('cleardoc')        
      }, 150)
    },
    getContentText () {
      setTimeout(() => {
         this.$editor.setContent(this.form[this.keyname])     
      }, 150)
    }
  }
}
</script>

<style lang="css">
.uedit{
  line-height: 20px;
}
</style>
